<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ str }} - {{ tran('welcome') }} - {{ tran('bye') }}
      <button @click=" lang = 'zh' ">中文</button>
      <button @click=" lang = 'en' ">英文</button>
    </div>
  </body>
  <script src="../lib/vue.js"></script>
  <script>
    const langObject = {
      zh: {
        welcome: "欢迎",
        bye: "再见",
      },
      en: {
        welcome: "welcome",
        bye: "bye",
      },
    };

    // 国际化 -- I18n
    const I18nPlugin = {
      install(app, options) {
        console.log(app); // app.config 给原型 添加属性和方法
        console.log(options); // langObject
        console.log(this); // install方法

        Vue.prototype.str = "测试";

        // 全局定义方法之后，调用时  this指向使用者
        Vue.prototype.tran = function (item) {
          console.log("item", item); // welcome bye
          console.log("this", this); // app对应的实例

          return options[this.lang][item]; // langObject['en']['welcome']
        };
      },
    };

    Vue.use(I18nPlugin, langObject);

    const app = new Vue({
      data: {
        lang: "en",
      },
    });
    app.$mount("#app");
  </script>
</html>
